<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./index.css" />
</head>

<body>
  <section id="wrap">
    <h2 class="title">百度音乐榜单</h2>
    <ul id="list">
      <li>
        <input type="checkbox" />
        <span>第一条信息</span>
        <a href="javascript:;" class="collect">收藏</a>
        <a href="javascript:;" class="cancelCollect">取消收藏</a>
        <a href="javascript:;" class="remove">删除</a>
      </li>
    </ul>
    <footer class="footer">
      <label><input type="checkbox" id="checkAll" />全选/全不选</label>
      <a href="javascript:;" id="remove">删除</a>
      <input type="text" id="newInfo" />
      <a href="javascript:;" id="add">添加</a>
    </footer>
  </section>
  <script>
    var data = [{
      id: 0,
      title: "残酷月光 - 费启鸣",
      checked: false,
      collect: true
    }, {
      id: 1,
      title: "兄弟 - 艾热",
      checked: false,
      collect: false
    }, {
      id: 2,
      title: "毕生 - 夏增祥",
      checked: false,
      collect: true
    }, {
      id: 3,
      title: "公子向北去 - 李春花",
      checked: false,
      collect: false
    }, {
      id: 4,
      title: "战场 - 沙漠五子",
      checked: false,
      collect: false //是否收藏 true 收藏 false 没有收藏
    }];


    //渲染数据函数
    renderDom = (data) => {
      const ulEl = document.querySelector("#list");
      ulEl.innerHTML = "";
      data.forEach((item, key) => {
        let liEl = document.createElement("li");
        let str = `
          <input type="checkbox" ${item.checked?"checked":""}/>
          <span>${item.title}</span>
          ${item.collect?'<a herf="javascript:;" class="cancelCollect">取消收藏</a>':'<a herf="javascript:;" class="collect">收藏</a>'}
          <a href="javascript:;" class="remove">删除</a>
        `
        liEl.innerHTML = str;
        ulEl.appendChild(liEl);
      })
    }
    renderDom(data);
  </script>
</body>

</html>